<template>
  <div class="line">
    <headers></headers>
    <div class="favorite-container">
      <!-- 页面标题区域 -->
      <div class="page-header">
        <h2 class="page-title">我的收藏</h2>
        <p class="page-subtitle">您收藏的所有精彩旅游路线</p>
      </div>
      
      <!-- 线路列表区域 -->
      <div class="line-list-container" v-loading="loading">
        <!-- 线路卡片网格 -->
        <transition-group name="fade-list" tag="div" class="line3">
          <div 
            v-for="(item, index) in tableData" 
            :key="index" 
            class="line-item line4"
            @click="toInfo(item.lineId)"
          >
            <!-- 图片容器 -->
            <div class="image-container line5">
              <el-image 
                :src="item.images.split(',')[0]" 
                fit="cover"
                :preview-src-list="item.images.split(',')"
              >
                <div slot="error" class="image-placeholder">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              
              <!-- 收藏标记 -->
              <div class="favorite-badge">
                <i class="el-icon-star-on"></i>
              </div>
            </div>
            
            <!-- 文本内容区域 -->
            <div class="line-content line6">
              <h3 class="line-title line7">{{ item.name }}</h3>
              <div class="line-intro line8">{{ item.introduce }}</div>
              
              <!-- 线路元数据 -->
              <div class="line-meta">
                <span class="meta-item">
                  <i class="el-icon-map-location"></i>
                  {{ getDestination(item.name) }}
                </span>
                <span class="meta-item">
                  <i class="el-icon-time"></i>
                  约{{ Math.floor(Math.random() * 5) + 2 }}天
                </span>
              </div>
              
              <!-- 查看详情按钮 -->
              <el-button 
                type="primary" 
                size="small" 
                plain 
                class="view-details-btn"
                @click.stop="toInfo(item.lineId)"
              >
                查看详情
              </el-button>
            </div>
          </div>
        </transition-group>
        
        <!-- 空状态 -->
        <el-empty 
          v-if="tableData.length === 0 && !loading" 
          description="暂无收藏的旅游线路"
        >
          <el-button type="primary" @click="$router.push('/line')">去浏览线路</el-button>
        </el-empty>
      </div>
      
      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
          background
          :current-page.sync="search.pageNumber"
          :page-size="search.pageSize"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    
    <!-- 返回顶部按钮 -->
    <el-backtop :visibility-height="200">
      <div class="back-to-top">
        <i class="el-icon-top"></i>
      </div>
    </el-backtop>
    
    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysFavorPage } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  data() {
    return {
      search: {
        userId: "",
        pageSize: 12,
        pageNumber: 1,
      },
      total: 100,
      tableData: [],
      loading: false,
      destinations: ['北京', '上海', '广州', '深圳', '西安', '成都', '杭州', '三亚', '丽江', '桂林']
    }
  },
  components: {
    headers,
    bottoms
  },
  methods: {
    getSysFavorPage() {
      this.loading = true;
      getSysFavorPage(this.search).then(res => {
        if (res.code == 1000) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    
    toInfo(id) {
      this.$router.push("/lineInfo?id=" + id);
    },
    
    handleCurrentChange(val) {
      this.search.pageNumber = val;
      window.scrollTo({ top: 0, behavior: 'smooth' });
      this.getSysFavorPage();
    },
    
    // 从名称中提取目的地
    getDestination(name) {
      // 如果名称中含有城市名，则返回该城市名
      const city = this.destinations.find(city => name.includes(city));
      return city || this.destinations[Math.floor(Math.random() * this.destinations.length)];
    }
  },
  mounted() {
    try {
      const userInfo = JSON.parse(window.localStorage.getItem("user_info"));
      if (userInfo && userInfo.id) {
        this.search.userId = userInfo.id;
        this.getSysFavorPage();
      } else {
        this.$message.error('请先登录');
        this.$router.push('/login');
      }
    } catch (error) {
      this.$message.error('获取用户信息失败，请重新登录');
      this.$router.push('/login');
    }
  }
}
</script>

<style scoped>
/* 保留原有CSS引入 */
@import url('../../assets/css/line.css');

/* 新增样式，增强视觉效果 */
.favorite-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题区域 */
.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  color: #303133;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 16px;
  color: #909399;
  margin: 0;
}

/* 线路列表容器 */
.line-list-container {
  min-height: 400px;
  margin-bottom: 30px;
}

/* 线路项样式增强 */
.line-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}

.line-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* 图片容器增强 */
.image-container {
  position: relative;
  height: 180px;
  overflow: hidden;
}

/* 图片样式 */
.el-image {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.line-item:hover .el-image {
  transform: scale(1.05);
}

/* 图片占位符 */
.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

/* 收藏徽章 */
.favorite-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #F56C6C;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 内容区域增强 */
.line-content {
  padding: 15px;
}

.line-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.line-intro {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
  /* 多行文本截断 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 44px;
}

/* 元数据区域 */
.line-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 13px;
  color: #909399;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-item i {
  margin-right: 5px;
}

/* 详情按钮 */
.view-details-btn {
  width: 100%;
  transition: all 0.3s;
}

.view-details-btn:hover {
  transform: translateY(-2px);
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* 返回顶部按钮 */
.back-to-top {
  background-color: #409EFF;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* 列表动画 */
.fade-list-enter-active, .fade-list-leave-active {
  transition: all 0.5s;
}

.fade-list-enter, .fade-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .favorite-container {
    padding: 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .line-meta {
    flex-direction: column;
    gap: 5px;
  }
}
</style>